<script setup>
import { UserFilled, PieChart, Edit } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const re = () => {
    // router.push('/home')
    // window.location.reload();
    // location.reload()
    console.log(11);
}
const activeIndex = ref('/home')
onMounted(() => {
    activeIndex.value = route.path
})

const edit = ref(false)
</script>
<template>
    <div class="main">
        <div class="left-1">
            <div class="left-2">
                <img src="/image/a.png" alt="">
            </div>
            <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu" text-color="#fff" router
                :default-active="activeIndex">
                <el-menu-item index='/home' @click="re">
                    <el-icon>
                        <PieChart />
                    </el-icon>
                    <span>首页</span>
                </el-menu-item>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon>
                            <Edit />
                        </el-icon>
                        <span>订单管理</span>
                    </template>
                    <el-menu-item index="/message">订单</el-menu-item>
                </el-sub-menu>
                <el-menu-item index='/record'>
                    <el-icon>
                        <PieChart />
                    </el-icon>
                    <span>站点管理</span>
                </el-menu-item>
                <el-sub-menu index="3">
                    <template #title>
                        <el-icon>
                            <Edit />
                        </el-icon>
                        <span>产品管理</span>
                    </template>
                    <el-menu-item index="/account">电池</el-menu-item>
                    <el-menu-item index="/city">城市</el-menu-item>
                </el-sub-menu>
                <el-menu-item index=''>
                    <el-icon>
                        <PieChart />
                    </el-icon>
                    <span>充电桩管理</span>
                </el-menu-item>
                <el-menu-item index='/user'>
                    <el-icon>
                        <PieChart />
                    </el-icon>
                    <span>用户管理</span>
                </el-menu-item>
                <el-menu-item index='/question'>
                    <el-icon>
                        <PieChart />
                    </el-icon>
                    <span>故障处理</span>
                </el-menu-item>

            </el-menu>
        </div>
        <div class="right">
            <div class="header">
                <h1>后台管理</h1>
                <a
                    href="https://bms.mtxnyjs.com/front/clocation/admin.html#/skiplogin?&param=dXNlcm5hbWU6eHh4eHg9PSYmPT1wYXNzd29yZDoqKioqKioNCg==">跳转</a>
                <el-dropdown>
                    <el-icon :size="50" class="header-1" color="white">
                        <UserFilled />
                    </el-icon>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>跳转</el-dropdown-item>
                            <el-dropdown-item @click="edit = true">修改密码</el-dropdown-item>
                            <el-dropdown-item>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <Router-view></Router-view>
        </div>
    </div>
    <el-dialog v-model="edit" title="修改密码">
        <el-form label-position="top">
            <el-form-item label="原密码">
                <el-input placeholder="原密码"></el-input>
            </el-form-item>

            <el-form-item label="新密码">
                <el-input placeholder="新密码"></el-input>
            </el-form-item>

            <el-form-item label="确认新密码">
                <el-input placeholder="确认新密码"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="edit = false">取消</el-button>
                <el-button type="primary" @click="edit = false">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<style scoped lang="scss">
.main {
    display: flex;
}

.left-1 {
    width: 15vw;
    height: 100vh;
    background-color: #545c64;

    .left-2 {
        width: 100%;
        height: 10vh;
        background-color: #FCFCFC;
        position: relative;

        img {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 80%;
            display: block;
            transform: translate(-50%, -50%);
        }
    }
}


.right {
    width: 85vw;
    height: 100vh;

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 10vh;
        background-color: #545c64;
        color: #FCFCFC;

        h1 {
            margin-left: 10px;
        }

        .header-1 {
            margin-right: 20px;
        }
    }
}

.el-menu {
    width: 15vw;
}

.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>
